<template>
    <div class="container">
        <h3>base64形式</h3>
        <img width="40" :src="svgBase64" alt="" />

        <hr />
        <p>img直接引入</p>
        <img src="@/assets/location-icon-red.png" alt="" />
        <hr />
        <p>组件的形式</p>
        <svg-icon icon-class="arrow" />
    </div>
</template>

<script setup>
    import SvgIcon from "@/components/SvgIcon/index.vue";
    import { svgToBase64 } from "@/utils/index.js";
    const commonPartSvgString = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
    <g clip-path="url(#clip0_7514_22325)">
        <path d="M5.33333 3.33203H7.33333V9.33203H5.33333V11.332H4V9.33203H2V3.33203H4V1.33203H5.33333V3.33203ZM3.33333 4.66536V7.9987H6V4.66536H3.33333Z" fill="#626C78"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0052 6.66406H14.0052V12.6641H12.0052V14.6641H10.6719V12.6641H8.67188V6.66406H10.6719V4.66406H12.0052V6.66406ZM10.0039 7.99609V11.3294H12.6706V7.99609H10.0039Z" fill="#626C78"/>
    </g>
    <defs>
        <clipPath id="clip0_7514_22325">
            <rect width="16" height="16" fill="white"/>
        </clipPath>
    </defs>
</svg>
`;
    const svgBase64 = svgToBase64(commonPartSvgString);
</script>
<style lang="less" scoped>
    .container {
    }
</style>
